<template>
  <div class="activityarea-box">
    <div class="activity-banner-box">
      <img class="activity-img" src="../../../images/area_banner.png" />
    </div>
    <div class="activity-product-body knife_container">
      <template v-for="(item, index) in actList">
        <template v-for="(child, childIndex) in item.activityProductVOS">
          <div class="activity-item">
            <span class="discount-card" v-if="child.personalLimited">人均限购{{child.personalLimitNum}}件</span>
            <span class="discount-card" v-else>特价</span>

            <div class="sell-out" v-if="timeFilters(item.startTime, item.endTime) === 2">
              <img class="sell-out-img" src="../../../images/sellnull.png" />
              <!-- <router-link tag="span"
              class="btn-yellow-over pro-over-pos"
              :to="{name: 'productDetail', params: {commodityID: child.oldGoodsId}, query: {keyword: $route.query.keyword}}" >查看原价商品</router-link> -->
            </div>

            <div class="pointer activity-left" @click="openDetail(child)">
              <div class="preview-img">
                <img class="img" :src="prefixImg + child.image"/>
              </div>
            </div>
            <div class="price-box activity-right">
              <div class="pro-info txt-center">
                <h3 class="pro-name ellipsis">{{child.goodsName}} {{child.brandName}}</h3>
                <h4 class="pro-type">{{child.standard}}</h4>
              </div>
              <div class="price">
                <template v-if="isExamComputed === 1">
                  <span class="now">￥{{child.pmtPrice | floatPrices}}</span>
                  <span class="old">￥{{child.price | floatPrices}}</span>
                  <span class="left">剩{{child.stock > 0 ? child.stock : 0}}件</span>
                </template>
                <p class="txt-center ft-14" v-else-if="isExamComputed === 4">登录后查看价格</p>
                <p class="txt-center ft-14" v-else>审核通过可查看</p>
              </div>
              <div v-if="timeFilters(item.startTime, item.endTime) === 1">
                <el-input-number class="input-num-self-activity-detail"
                  :title="`包装数${child.packingNum}`"
                  size="mini"
                  @keydown.110.native.prevent="" 
                  v-model="child.number"
                  :min="0"
                  :max="child.personalLimited ? child.lastPersonalLimitNum : child.stock"
                  :step="child.packingNum"
                  :ref="`pro_${childIndex}`"
                  @change="debounceChangeProNum($event, childIndex, child.packingNum, child)" >
                </el-input-number>
                <!-- @click="timeAddShopcart(child.productId, index, child)" -->
              <button class="circle-btn-buy btn-buy"
              :ref="`buy_${childIndex}`">立即抢购</button>
              </div>
              <button class="circle-btn-buy" @click="showMessage(item.startTime)" v-if="timeFilters(item.startTime, item.endTime) === 0">
                {{item.startTime | startTimeFilter}}开启
              </button>
              <button class="circle-btn-buy disabled-buy" @click="showMessage(startTime)" v-if="timeFilters(item.startTime, item.endTime) === 2">
                {{item.startTime | startTimeFilter}}场已结束
              </button>
            </div>
          </div>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { prefixImg } from '@/tool/index'
import { InputNumber } from 'element-ui'
export default {
  components: {
    elInputNumber: InputNumber
  },
  data () {
    return {
      prefixImg,
      actList: null, // 活动列表
      nowDate: (new Date()).getTime()
    }
  },
  computed: {
    isExamComputed () {
      return this.$store.getters.loginStatus
    }
  },
  methods: {
    ...mapActions([ 'fetchOpenActivity' ]),
    showMessage (time) {
      let result = time.split(' ')[1].substr(0, 5)
      this.$message(`${result}开启，敬请等待`)
    },
    openDetail (item) {
      if (item.stock < 1) return
      console.log(`${item.goodsId}`)
      this.$router.push({name: 'productDetail', params: {commodityID: item.goodsId}, query: {keyword: this.$route.query.keyword}})
    },
    activityTime () {
      let arr = []
      this.fetchOpenActivity().then(res => {
        this.actList = arr.concat(res.voList, res.overList)
        let result = this.timeFilters(this.actList[0]['startTime'], this.actList[0]['endTime'])
        console.log(result)
        if (result === 1) {
          this.actList[0].activityProductVOS.map((item, index) => {
            item.number = 0
          })
        }
      })
    },
    timeFilters (starttime, endtime) {
      const starTimeStamp = (new Date(starttime.replace(/-/g, '/'))).getTime()
      const endTimeStamp = (new Date(endtime.replace(/-/g, '/'))).getTime()
      const nowTime = (new Date()).getTime()
      // 活动结束
      if (nowTime > endTimeStamp) {
        return 2
      }
      // 活动未开启
      if (nowTime < starTimeStamp) {
        return 0
      }
      // 活动进行中
      if (nowTime >= starTimeStamp && nowTime <= endTimeStamp) {
        return 1
      }
      return 4 // 参数不太对
    }
  },
  mounted () {
    this.activityTime()
  },
  filters: {
    startTimeFilter (value) {
      if (!value) return '00:00'
      let time = value.split(' ')[1].substr(0, 5)
      return time
    }
  }

}
</script>

<style lang="scss" scoped>
.activity-content{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.activity-item{
    position: relative;
    width: 232px;
    margin-bottom: 10px;
    padding: 0 20px 16px;
    font-size: 0;
    display: inline-block;
    background: #FFFFFF;
    border-radius: 2px;
    margin-right: 10px;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  &:nth-child(5n){
    margin-right: 0;
  }
  .stock-num{
    display:inline-block;
    padding: 0 10px;
    line-height: 2;
    font-size: 14px;
    background: #413d3d;
    color: #ffffff;
  }
  .preview-img{
    height: 200px;
    width: 200px;
    margin: 0 auto 12px;
    .img{
      width: 100%;
      height: 100%;
      vertical-align: middle
    }
  }
  .pro-name{
    color: #666;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .pro-type{
    color: #a3a3a3;
    font-size: 12px;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .price-box{
    margin-top: 12px;
    padding-bottom: 2px;
    // border-top: 1px solid rgba(220,220,220, .2);
    // padding-top: 16px;
  }
  .price{
    margin-bottom: 20px;
    font-size: 0;
  }
  .old{
    color: #bdbdbd;
    font-size: 12px;
    text-decoration: line-through;
  }
  .now{
    display: inline-block;
    font-size: 16px;
    padding-right:3px;
    color: #ff0f34;
    // font-weight: 550;
  }
  .old{
    color: #bdbdbd;
    font-size: 12px;
    text-decoration: line-through;
  }
  .left{
    float: right;
    color: #5c5c5c;
    font-size: 14px;
    margin-top: 2px;
  }

  .btn-disabled{
    color: #999;
    border: 1px solid #ddd;
    background: #f0f0f0;
    cursor: not-allowed;
  }
  .cannot-buy{
    display:block;
    // width: 100%;
    // height:40px;
    text-align: center;
    color: #ffffff;
    background: #dfdfdf;
    // border-radius: 2px;
    // font-size: 16px;
    // line-height: 40px;
  }
  .sell-out{
    position:absolute;
    left:0;
    top:0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,.63);
    z-index: 88;
    .sell-out-img{
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      top: 76px;
    }
  }
}
.btn-yellow-over{
  display: inline-block;
  width:130px;
  height:40px;
  font-size:14px;
  color:rgba(51,51,51,1);
  text-align: center;
  line-height: 40px;
  background:rgba(251,205,59,1);
  border-radius:6px;
}
.pro-over-pos{
  position: absolute;
  bottom: 36px;
  left: 50%;
  margin-left: -65px;
  cursor: pointer;
}
.circle-btn-buy{
  text-align: center;
  color: #FF0000;
  border-radius: 2px;
  font-size: 14px;
  line-height: 26px;
  border: 1px solid #FF0000;
  background: transparent;
  margin-bottom: 2px;
  width: 100%;
  cursor: pointer;
  border-radius: 2px;
}
.btn-buy{
  float: right;
  color: #FFF;
  background: #FF0000;
  width: 86px;
}
.disabled-buy{
  color: #666;
  background: #FFF;
  border: 1px solid #666666;
}
.activity-number{
  margin-bottom: 8px;
  overflow: hidden;
  line-height: 20px;
}
.input-num-self-activity-detail{
  float: left;
  width: 96px;
  height: 28px;
  line-height: 28px;
  overflow: hidden;
}
</style>
<style lang="scss">
.input-num-self-activity-detail{
  .el-input__inner{
    height: 28px;
    width: 96px;
    padding-left: 28px!important;
    padding-right: 28px!important;
    font-size: 16px;
    line-height: 28px;
    border-radius: 4px;
    color: #666;
    border: 1px solid #CBCBCB;
    background: transparent!important;
  }
  .el-input-number__decrease{
    border-radius: 4px 0 0 4px;
  }
  .el-input-number__increase{
    border-radius: 0 4px 4px 0;
  }
  .el-input-number__increase, .el-input-number__decrease {
    background: transparent!important;
    width: 28px;
    font-size: 12px
  }
  .el-input-number__increase.is-disabled, .el-input-number__decrease.is-disabled {
    color: #CBCBCB;
    background: transparent!important;
  }
}
</style>
